<template>
  <div>
    <!-- vant插件下拉刷新 -->
    <van-pull-refresh v-model="refreshing" :disabled="finished" @refresh="onRefresh">
     <!-- vant插件上拉加载 -->
    <van-list
     :finished="finished"
     v-model="loading"
     finished-text="没有更多了"
     @load="onLoad"
>
    <!-- 导入注册并使用ArticalInfo组件 -->
    <ArticalInfo
     v-for="item in artList"
      :key="item.id"
      :title="item.title"
      :author="item.aut_name"
      :cmtCount="item.comm_count"
      :pubDate="item.pubdate"
      :cover="item.cover"
      />
    </van-list>
  </van-pull-refresh>
  </div>
</template>

<script>
import axios1 from '../../Utils/request.js'
import ArticalInfo from '../../components/Artical/ArticalInfo.vue'
export default {
  name:'Home', 
  created(){
    this.getArticalList()
  },
  components:{
    ArticalInfo
  },
  data(){
    return {
      // page是页码
       page:1,
      //  limit是请求行数
       limit:10,
      //  为文章封装一个数组
      artList:[],
      // 是否正在加载下一页数据，如果loading为true则不会反复触发load事件
      // 每当下一页数据请求回来后，千万要记得把loading改为false
      loading:true,
      finished:false,
      // 控制下拉刷新
      refreshing:true
    }
  },

  methods:{
      async getArticalList(isRefresh){
         const {data: res}=await axios1.get('/articles',{
          // 请求参数
          params:{
            _page:this.page,
            _limit:this.limit
          }
         })
       console.log(res);
       if(isRefresh){
         //  如果是下拉数据加载更多，那么应该是：
        // this.artList=[新数据在前，旧数据在后]  数据拼接
        this.artList=[...res,...this.artList]
        this.refreshing=false
       }else{
         //  如果是上拉数据加载更多，那么应该是：
        // this.artList=[旧数据在前，新数据在后]  数据拼接
        this.artList=[...this.artList,...res]
        this.loading=false
        if(res.length===0){
          this.finished=true
        }
       }
      },
      // 只要onLoad事件被调用，就应该请求下一页数据
       onLoad(){
        // console.log('触发了load事件');
        // 1.让页码值+1
        this.page++
        // 2.重新请求接口获取数据
        this.getArticalList()
       },
      //  下拉刷新处理函数
      onRefresh(){
        // 1.让页码值+1
        this.page++
        // 2.重新请求接口获取数据
        this.getArticalList(true)
      }
  }
}
</script>

<style lang="less" scoped>

</style>